/**
 * Created by Jimmy on 2018/11/30.
 */
<template>
  <div>
    <el-row class="container">
      <el-col :span="24">
        <div class="home-btn">测绘项目管理系统</div>
        <div class="menu">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#383d41"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item index="1">项目管理</el-menu-item>
            <el-menu-item index="2">项目报价</el-menu-item>
          </el-menu>
        </div>
        <div class="top-account">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
                {{nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">账户概况</el-dropdown-item>
              <el-dropdown-item command="2">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      title="账户概况"
      :visible.sync="accountInfoVisible"
      width="50%"
      center>
      <ul class="dialog-info-list">
        <li v-for="item in this.companyMsg" :key="item.index">
          <span>{{item.msgTile}}</span>:<span>{{item.msgC}}</span>
        </li>
      </ul>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="accountInfoVisible = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import ElCol from "element-ui/packages/col/src/col";
  export default {
    components: {
      ElCol,
      ElRow
    },
    name: 'TopNav',
    data() {
      return {
        activeIndex: '1',
        nickname:'',
        token:'',
        companyMsg:[
          {msgTile:'归属公司',msgC:''},
          {msgTile:'版本', msgC:''},
          {msgTile:'开通时间', msgC:''},
          {msgTile:'到期时间', msgC:''}
        ],
        accountInfoVisible:false,
        form:{
          oldPwd:'',
          newPwd:'',
          newPwdCheck:''
        },
        changePwdVisible:false
      }
    },
    mounted() {
      let user = window.localStorage.getItem('access-user');
      if (user) {
        user = JSON.parse(user);
        this.nickname = user.UserName || ''
        this.token = user.Token
      }
      if (this.$route.name === 'Budget') {
        this.activeIndex = '2'
      } else {
        this.activeIndex = '1'
      }

    },
    methods: {
      handleSelect(key, keyPath) {
        if (key === '1'){
          this.$router.push({path: '/panel/project/management'})
        } else if (key === '2') {
          this.$router.push({path: '/panel/budget'})
        }
      },
      handleCommand(command) {
        if (command === '1'){
          this.showAccount()
        } else if (command === '2') {
          this.logout()
        }
      },
      showAccount () {
        this.$http.post(this.domain + '/info', {
          token: this.token
        }).then((response) => {
          if (response.data.Success) {
//            console.log(response.data)
            this.companyMsg[0].msgC = response.data.Data.CompanyName
            this.companyMsg[1].msgC = response.data.Data.ProductVersion === 0 ? "企业版":"试用版"
            this.companyMsg[2].msgC = response.data.Data.CreatedDate
            this.companyMsg[3].msgC = response.data.Data.ExpiredDate
            this.accountInfoVisible = true
          } else {
            this.$message.error(response.data.Msg)
          }
        }).catch(function (response) {
          this.$message.error(response.data)
        })
      },
      logout(){
        let that = this;
        this.$confirm('确认退出吗?', '提示', {
          confirmButtonClass: 'el-button--warning'
        }).then(() => {
          //确认
          this.$http.post(this.domain + '/logout', {
            token: this.token
          }).then((response) => {
            if (response.data.Success) {
//              console.log(response.data)
              this.$message.success(response.data.Msg)
              localStorage.removeItem('access-user');
//              that.$router.go('/login'); //用go刷新
              that.$router.push({
                path: '/login'
              })
            } else {
              this.$message.error(response.data.Msg)
              that.$router.push({
                path: '/login'
              })
            }
          }).catch(function (response) {
            this.$message.error(response.data)
            that.$router.push({
              path: '/login'
            })
          })
        }).catch(() => {});
      }
    }
  }
</script>

<style scoped>
  .el-dropdown-link{
    color: white;
  }
  .top-account{
    color: white;
    float: right;
    cursor: pointer;
    margin-right: 15px;
  }
  .el-menu-item{
    height: 50px;
    line-height: 50px;
  }
  .menu{
    float: left;
  }
  .home-btn{
    float: left;
    width: 160px;
    height: 49px;
    cursor: pointer;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
  }
  .container {
    line-height: 50px;
    text-align: center;
    position: absolute;
    color: #fff;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #373d41;
    padding: 0px;
  }
</style>
